<template>
  <div class="view">
    <div class="box" style="height:100%" v-show="showBox">
      <el-row class="handle-box">
       <el-col :span="9">
        <el-button
          class="jianbianbule"
          type="primary"
          icon="el-icon-plus"
          @click="showBox = !showBox"
          >{{ $t("templatecon.template") }}</el-button>
       </el-col>
       <el-col :span="14" style="text-align: right;">
        <span>{{ $t("blockcon.areaname") }}：</span>
        <el-select
          v-model="filters.area"
          filterable
          clearable
          @change="search"
          :placeholder="$t('public.select')"
        >
          <el-option
            v-for="item in areadata"
            :key="item.areaId"
            :label="item.areaName"
            :value="item.areaName"
          >
          </el-option>
        </el-select>
        <span>{{ $t("templatecon.templatetype") }}：</span>
        <el-select
          v-model="filters.modeltype"
          filterable
          clearable
          @change="search"
          :placeholder="$t('public.select')"
        >
          <el-option
            v-for="item in templatetypedata"
            :key="item.value"
            :label="item.label"
            :value="item.label"
          >
          </el-option>
        </el-select>
      </el-col>
      </el-row>

      <div class="tablebox">
      <template>
        <el-table :data="tables" size="mini" stripe class="tablefisbox">
          <el-table-column type="index" :label="$t('public.number')" width="100" align="center">
          </el-table-column>
           <el-table-column prop="specialty" :label="$t('welllist.welltype')" width="180">
          </el-table-column>
          <el-table-column prop="areas" :label="$t('blockcon.areaname')" align="center">
          </el-table-column>
          <el-table-column prop="modeltype" :label="$t('templatecon.templatetype')" align="center">
          </el-table-column>
          <el-table-column prop="modelname" :label="$t('templatecon.templatename')" align="center">
          </el-table-column>
          <el-table-column prop="filenames" :label="$t('templatecon.file')" align="center">
          </el-table-column>
          <el-table-column :label="$t('public.operation')" width="250" align="center">
            <template slot-scope="scope">
              <el-button
                type="warning"
                icon="el-icon-edit"
                round
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >{{ $t("public.edit") }}</el-button
              >
              <el-button
                type="danger"
                icon="el-icon-delete"
                round
                size="mini"
                @click="handleDelete(scope.$index, scope.row)"
                >{{ $t("public.del") }}</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
      <el-col class="pages">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="pageSize"
          :total="total"
        >
        </el-pagination>
      </el-col>
    </div>
 </div>
    <Addbox v-show="!showBox" @cancel="cancel" :param="editform" :models="models" :area="areadata"></Addbox>
  </div>
</template>

<script>
import Addbox from "./addTemplate"; //新增模板
import api from '../../../../static/layui/vuepublic'
export default {
  components: {
    Addbox,
  },
  data() {
    return {
      models: "",
      editform: {}, //编辑参数
      addform: {},
      filters: {
        area: "",
        modeltype: "",
      },
      //区域名称
      areadata: [],
      //模板类型数据
      templatetypedata: [
        {
          value: "1",
          label: "钻井工程",
        },
        {
          value: "2",
          label: "综合录井",
        },
        {
          value: "3",
          label: "随钻跟踪",
        },
        {
          value: "4",
          label: "完井测试",
        },
        {
          value: "5",
          label: "自定义模板",
        },
      ],
      idx: -1,
      showBox: true,
      tables: [], //表格数据
      total: 0, //总共条数
      page: 1, //请求页
      limit: 10, //页条数
      pageSize: 1, //当前页
    };
  },
  watch: {
    "filters.area"(val) {
      if (val.trim() === "") {
        this.getTemplates();
      }
    },
    "filters.modeltype"(val) {
      if (val.trim() === "") {
        this.getTemplates();
      }
    },
  },
  mounted() {
    layui.use(["form", "colorpicker", "layer", "table"], () => {
      var form = layui.form;
      var layer = layui.layer;
      var table = layui.table;
      window.graph.layer = layer;
      window.graph.form = form;
      window.SChart.tables = table;
    });
    window.graph.PortSet(api.api_address);
    this.getTemplates();
    this.areaSelect();
  },
  methods: {
    handleSizeChange(val) {
      this.limit = val;
      this.getTemplates();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.pageSize = val;
      this.getTemplates();
    },
    //模糊搜索
    search() {
      this.page = 1;
      this.limit = 10;
      this.pageSize = 1;
      this.getTemplates();
    },
    //获取模板
    async getTemplates() {
      try {
        let params = {
          areas: this.filters.area,
          modeltypes: this.filters.modeltype,
          page: this.page,
          limit: this.limit,
        };
        let res = await this.$api.set.getTemplate(params);
        this.total = res.count;
        this.tables = res.data;
      } catch (e) {
        console.log(e);
      }
    },
    //获取区域名称数据
    async areaSelect() {
      let option = await this.$api.set.areaSelect();
      this.areadata = option.data;
    },
    // 删除操作
    handleDelete(index, row) {
      window.graph.PortSet(api.api_address);
      // 二次确认删除
      this.$confirm(
        this.$t("public.confirmcontent"),
        this.$t("public.confirmtitle"),
        {
          type: "warning",
        }
      )
        .then(async () => {
          //删除模板
          let deletes = {
            Areas: row.areas,
            ModelName: row.modelname,
            UserId: 1,
            Specialty: "录井",
            ModelType: row.modeltype,
          };

          var res = JSON.parse(
            window.graph.DeleteTemplate("/dl/deletes", "", deletes)
          );
          if (res.code == 200) {
            this.$message.success(this.$t("public.confirmtips1"));
            this.getTemplates(); //刷新数据
          }else {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "error",
            });
          }
        })
        .catch(() => {});
    },
    //编辑模板
    handleEdit(index, row) {
      this.editform = {
        Areas: row.areas,//区域
        ModelName: row.modelname, //模板名称
        Specialty: row.specialty, //井别
        ModelType: row.modeltype, //模板类型
        btnShow: true, //保存按钮判断
      };
      this.models = row.modelname;//模板名称(用于对比)
      $("#graph").empty();
      this.showBox = false;
      window.graph.ShowTemplateM("/dl/showtemp", "", this.editform, "graph");
    },
    cancel(show) {
      this.showBox = show;
    },
  },
};
</script>
